<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类详情 - 徐理念Blog</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/script/jquery-3.6.0.min.js">  </script>
    <style>
        .category-tree ul {
            list-style-type: none;
            padding-left: 20px;
        }

        .category-tree > ul {
            padding-left: 0;
        }

        .category-item {
            margin-bottom: 8px;
        }

        .category-icon {
            margin-right: 8px;
        }

        .category-card {
            transition: transform 0.2s;
        }

        .category-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .article-cover-img {
            height: 120px;
            object-fit: cover;
            width: 100%;
        }
    </style>
</head>
<body>
<!-- 头部区域 -->
<header class="blog-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <!-- 左侧标题 -->
            <div class="blog-title">
                <h3 class="mb-0">徐理念Blog</h3>
            </div>

            <!-- 中间导航链接 -->
            <nav class="d-none d-md-block">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="/blogHome"><i class="bi bi-house-door"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleList"><i class="bi bi-card-text"></i> 全部动态</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/categories"><i class="bi bi-folder"></i> 分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/tagList"><i class="bi bi-tags"></i> 标签</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleManage"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </li>
                </ul>
            </nav>

            <!-- 右侧用户信息 -->
            <div class="user-info">
                <div class="dropdown">
                    <a class="d-flex align-items-center text-decoration-none dropdown-toggle"
                       href="#" role="button" data-bs-toggle="dropdown">
                        <div class="user-avatar" th:text="用户">U</div>
                        <span class="d-none d-md-inline" th:text="徐理念">用户名</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                        <li><a class="dropdown-item" href="/settings"><i class="bi bi-gear"></i> 设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="main-content">
    <div class="container">
        <!-- 移动端导航菜单 -->
        <div class="d-md-none mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="/" class="btn btn-outline-primary"><i class="bi bi-house-door"></i> 首页</a>
                        <a href="/articleList" class="btn btn-outline-primary"><i class="bi bi-card-text"></i> 全部动态</a>
                        <a href="/categories" class="btn btn-outline-primary active"><i class="bi bi-folder"></i> 分类</a>
                        <a href="/tags" class="btn btn-outline-primary"><i class="bi bi-tags"></i> 标签</a>
                        <a href="/articleManage" class="btn btn-outline-primary"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="row">
            <!-- 分类树 -->
            <div class="col-lg-2">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">分类目录</h4>
                    </div>
                    <div class="card-body">
                        <div class="category-tree">
                            <ul th:if="${categoryTree != null and not #lists.isEmpty(categoryTree)}">
                                <li th:each="category : ${categoryTree}" class="category-item">
                                    <div>
                                        <a th:href="@{/categoryArticle(id=${category.id})}" class="text-decoration-none">
                                            <i th:class="${category.icon ?: 'bi bi-folder'}" class="category-icon"></i>
                                            <strong th:text="${category.name}">分类名称</strong>
                                        </a>
                                        <input id="categoryArtNumId" type="hidden" th:value="${category.id}">
                                        <span id="categoryArtNum" class="badge bg-secondary ms-2" th:text="${#lists.size(category.children)}">0</span>
                                    </div>
                                    <!-- 二级分类 -->
                                    <ul th:if="${category.children != null and not #lists.isEmpty(category.children)}">
                                        <li th:each="child : ${category.children}" class="category-item">
                                            <div>
                                                <a th:href="@{/categoryArticle(id=${child.id})}" class="text-decoration-none">
                                                    <i th:class="${child.icon ?: 'bi bi-folder'}" class="category-icon"></i>
                                                    <span th:text="${child.name}">二级分类</span>
                                                </a>
                                            </div>
                                            <!-- 三级分类 -->
                                            <ul th:if="${child.children != null and not #lists.isEmpty(child.children)}">
                                                <li th:each="grandchild : ${child.children}" class="category-item">
                                                    <div>
                                                        <a th:href="@{/categoryArticle(id=${grandchild.id})}" class="text-decoration-none">
                                                            <i th:class="${grandchild.icon ?: 'bi bi-folder'}" class="category-icon"></i>
                                                            <span th:text="${grandchild.name}">三级分类</span>
                                                        </a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <div th:if="${categoryTree == null or #lists.isEmpty(categoryTree)}" class="text-center py-3">
                                <p class="text-muted">暂无分类</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分类下的文章列表 -->
            <div class="col-lg-10">
                <div class="card">
                    <!--分类管理-->
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0">
                                <i th:class="${category.icon ?: 'bi bi-folder'}" class="me-2 text-primary"></i>
                                <span id="categoryName" th:text="${category.name}" class="text-primary fw-bold">分类名称</span>
                                <span class="text-muted ms-2">下的文章</span>
                            </h4>
                        </div>
                        <span id="articleCount" class="ms-auto me-3 text-muted">分类管理:</span>
                        <div >
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="editCategory()">
                                <i class="bi bi-pencil"></i> 修改
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="addSubCategory()">
                                <i class="bi bi-plus"></i> 添加
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteCategory()">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                    <!--添加 修改 删除分类单矿                    -->
                    <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="addCategoryModalLabel">添加子分类</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="addCategoryForm">
                                        <input type="hidden" id="parentId" th:value="${category != null ? category.id : 0}" value="0">
                                        <div class="mb-3">
                                            <label for="addCategoryName" class="form-label">分类名称 *</label>
                                            <input type="text" class="form-control" id="addCategoryName" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="addCategoryIcon" class="form-label">图标类名</label>
                                            <input type="text" class="form-control" id="addCategoryIcon" placeholder="例如: bi bi-folder">
                                            <div class="form-text">使用Bootstrap Icons图标类名</div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="addCategoryDescription" class="form-label">分类描述</label>
                                            <textarea class="form-control" id="addCategoryDescription" rows="3"></textarea>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" onclick="saveNewCategory()">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 修改分类模态框 -->
                    <div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="editCategoryModalLabel">修改分类</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="editCategoryForm">
                                        <input type="hidden" id="editCategoryId" th:value="${category.id}">
                                        <div class="mb-3">
                                            <label for="editCategoryName" class="form-label">分类名称 *</label>
                                            <input type="text" class="form-control" id="editCategoryName" th:value="${category.name}" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="editCategoryIcon" class="form-label">图标类名</label>
                                            <input type="text" class="form-control" id="editCategoryIcon" th:value="${category.icon ?: 'bi bi-folder'}">
                                            <div class="form-text">使用Bootstrap Icons图标类名</div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="editCategoryDescription" class="form-label">分类描述</label>
                                            <textarea class="form-control" id="editCategoryDescription" rows="3" th:text="${category.description ?: ''}"></textarea>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" onclick="saveEditCategory()">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 删除确认模态框 -->
                    <div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteCategoryModalLabel">删除分类</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p>确定要删除分类 "<span id="deleteCategoryName" th:text="${category.name}"></span>" 吗？</p>
                                    <p class="text-danger">注意：此操作不可恢复！</p>

                                    <div class="mb-3">
                                        <label class="form-label fw-bold">请选择删除方式：</label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="deleteOption" id="deleteWithArticles" value="withArticles">
                                            <label class="form-check-label" for="deleteWithArticles">
                                                删除该分类及其子分类下的所有文章
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="deleteOption" id="deleteWithoutArticles" value="withoutArticles" checked>
                                            <label class="form-check-label" for="deleteWithoutArticles">
                                                只删除该分类及其所有子分类（文章将保留）
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="confirmDeleteCheck">
                                        <label class="form-check-label" for="confirmDeleteCheck">
                                            我已了解删除后果，确认删除
                                        </label>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-danger" onclick="confirmDeleteCategory()" disabled>删除</button>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- 文章列表                   -->
                    <div class="card-body">
                        <!-- 文章列表 -->
                        <div class="articles-list">
                            <div th:if="${articlePage != null and not #lists.isEmpty(articlePage.records)}">
                                <div th:each="article : ${articlePage.records}" class="article-item-wrapper">
                                    <a th:href="@{/articleDetail(id=${article.id})}" class="text-decoration-none">
                                        <div class="card article-card mb-3">
                                            <div class="row g-0">
                                                <!-- 文章封面 -->
                                                <div class="col-md-2" th:if="${article.coverImage != null and article.coverImage != ''}">
                                                    <img th:src="${article.coverImage}"
                                                         class="article-cover-img img-fluid"
                                                         alt="文章封面">
                                                </div>

                                                <!-- 文章内容 -->
                                                <div th:class="${article.coverImage != null and article.coverImage != '' ? 'col-md-10' : 'col-12'}">
                                                    <div class="card-body h-100 d-flex flex-column">
                                                        <h5 class="card-title">
                                                            <span th:text="${article.title}" class="text-dark">
                                                                文章标题
                                                            </span>
                                                        </h5>

                                                        <p class="card-text flex-grow-1"
                                                           th:text="${#strings.abbreviate(article.content, 150)}">
                                                            文章摘要
                                                        </p>

                                                        <div class="d-flex justify-content-between align-items-center mt-auto">
                                                            <div class="article-meta">
                                                                <small class="text-muted">
                                                                    <i class="bi bi-calendar"></i>
                                                                    <span th:text="${#temporals.format(article.createTime, 'yyyy-MM-dd HH:mm')}">
                                                                        发布时间
                                                                    </span>
                                                                    <span class="mx-2">•</span>
                                                                    <i class="bi bi-eye"></i>
                                                                    <span th:text="${article.viewCount ?: 0}">0</span> 浏览
                                                                    <span class="mx-2">•</span>
                                                                    <i class="bi bi-heart"></i>
                                                                    <span th:text="${article.likeCount ?: 0}">0</span> 点赞
                                                                </small>
                                                            </div>

                                                            <div class="btn-group" role="group">
                                                                <span class="btn btn-outline-primary btn-sm">
                                                                    <i class="bi bi-eye"></i> 阅读
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <!-- 分页组件 -->
                                <div class="pagination-container" th:if="${articlePage.pages > 1}">
                                    <nav aria-label="文章分页">
                                        <ul class="pagination">
                                            <!-- 上一页 -->
                                            <li class="page-item" th:classappend="${articlePage.current == 1} ? 'disabled'">
                                                <a class="page-link"
                                                   th:href="@{/categoryArticle(id=${category.id},pageNum=${articlePage.current - 1})}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>

                                            <!-- 页码 -->
                                            <li class="page-item"
                                                th:each="i : ${#numbers.sequence(1, articlePage.pages)}"
                                                th:classappend="${i == articlePage.current} ? 'active'">
                                                <a class="page-link"
                                                   th:href="@{/categoryArticle(id=${category.id},pageNum=${i})}"
                                                   th:text="${i}">1</a>
                                            </li>

                                            <!-- 下一页 -->
                                            <li class="page-item" th:classappend="${articlePage.current == articlePage.pages} ? 'disabled'">
                                                <a class="page-link"
                                                   th:href="@{/categoryArticle(id=${category.id},pageNum=${articlePage.current + 1})}"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>

                            <!-- 无文章时显示 -->
                            <div th:if="${articlePage == null or #lists.isEmpty(articlePage.records)}" class="text-center py-5">
                                <i class="bi bi-file-earmark-text" style="font-size: 3rem; color: #ccc;"></i>
                                <h5 class="mt-3">该分类下暂无文章</h5>
                                <p class="text-muted">这个分类还没有发布任何文章</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 底部区域 -->
<footer class="blog-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>联系我</h5>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fab fa-qq me-2"></i>
                        <strong>QQ:</strong> <span>123456789</span>
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-envelope me-2"></i>
                        <strong>Email:</strong> <span>example@example.com</span>
                    </li>
                    <li>
                        <i class="bi bi-chat-dots me-2"></i>
                        <strong>微信:</strong> <span>xuln_blog</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>关于博客</h5>
                <p>这是一个个人技术博客，分享编程经验、技术心得和生活感悟。</p>
            </div>
            <div class="col-md-4">
                <h5>友情链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-decoration-none">GitHub</a></li>
                    <li><a href="#" class="text-decoration-none">SegmentFault</a></li>
                    <li><a href="#" class="text-decoration-none">掘金</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <p class="mb-0">&copy; 2022 徐理念Blog. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script th:inline="javascript">
    // 在页面加载时存储数据
    /*<![CDATA[*/
    var categoryData = /*[[${category}]]*/ {};
    /*]]>*/
</script>
<script>
<!--    显示分类下的文章数量-->
    $(function() {
        var categoryArtNumId = $('#categoryArtNumId').val();
        $.ajax({
            type: 'GET',
            url: '/getCategoryArtNum',
            data: {
                categoryId: categoryArtNumId
            },
            success: function(data) {
                if (data.code === 200) {
                    $('#categoryArtNum').text(data.data);
                }
            }
        });

    });

    // $(document).ready(function() {
    //     // 监听删除确认复选框
    //     $('#confirmDeleteCheck').change(function() {
    //         $('#confirmDeleteBtn').prop('disabled', !$(this).is(':checked'));
    //     });
    //
    //     // 保存新分类按钮点击事件
    //     $('#saveNewCategoryBtn').click(function() {
    //         saveNewCategory();
    //     });
    //
    //     // 保存修改分类按钮点击事件
    //     $('#saveEditCategoryBtn').click(function() {
    //         saveEditCategory();
    //     });
    //
    //     // 确认删除按钮点击事件
    //     $('#confirmDeleteBtn').click(function() {
    //         confirmDeleteCategory();
    //     });
    // });

    // $(function addSubCategory() {
    //     // 清空表单
    //     $('#addCategoryForm')[0].reset();
    //     $('#parentId').val(/*[[${category.id}]]*/ 0);
    //
    //     // 显示模态框
    //     var addModal = new bootstrap.Modal($('#addCategoryModal')[0]);
    //     addModal.show();
    //     console.log("打开弹框");
    // })
    // 添加子分类
    function addSubCategory() {
        // 清空表单（添加无需清空）
        // $('#addCategoryForm')[0].reset();
        // $('#parentId').val(/*[[${category.id}]]*/ 0);

        // 显示模态框
        var addModal = new bootstrap.Modal($('#addCategoryModal')[0]);
        addModal.show();
        console.log("打开弹框");
    }

    // 修改分类
    function editCategory() {
        // 填充当前分类信息
        // 从预先存储的变量中获取数据
        $('#editCategoryId').val(categoryData.id || 0);
        $('#editCategoryName').val(categoryData.name || '');
        $('#editCategoryIcon').val(categoryData.icon || 'bi bi-folder');
        $('#editCategoryDescription').val(categoryData.description || '');

        // 显示模态框
        var editModal = new bootstrap.Modal($('#editCategoryModal')[0]);
        editModal.show();
    }

    // 删除分类
    function deleteCategory() {
        // 重置确认状态
        $('#confirmDeleteCheck').prop('checked', false);
        $('#confirmDeleteBtn').prop('disabled', true);

        // 显示模态框
        var deleteModal = new bootstrap.Modal($('#deleteCategoryModal')[0]);
        deleteModal.show();
    }

    // 保存新分类
    function saveNewCategory() {
        var categoryName = $('#addCategoryName').val().trim();
        if (!categoryName) {
            alert('请输入分类名称');
            return;
        }

        var categoryData = {
            "name": categoryName,
            "parentId": $('#parentId').val(),
            "description": $('#addCategoryDescription').val()
        };
        // console.log('父类id:', $('#categoryNameInput').val());
        console.log('父类id:', $('#parentId').val());
        $.ajax({
            type: 'POST',
            url: '/addCategory',
            data: JSON.stringify(categoryData),
            contentType: 'application/json',
            success: function(data) {
                console.log('保存新分类:', data);
                if (data.code === 200) {
                    alert('添加成功');
                    window.location.reload();
                } else {
                    alert('添加失败: ' + data.message);
                }
            }
        })

        // 这里应该发送AJAX请求到后端
        console.log('保存新分类:');

        // 关闭模态框
        bootstrap.Modal.getInstance($('#addCategoryModal')[0]).hide();
    }

    // 保存修改的分类
    function saveEditCategory() {
        var categoryName = $('#editCategoryName').val().trim();
        if (!categoryName) {
            alert('请输入分类名称');
            return;
        }
        console.log('修改分类id:', $('#editCategoryId').val());
        var categoryData = {
            id: $('#editCategoryId').val(),
            name: categoryName,
            icon: $('#editCategoryIcon').val(),
            description: $('#editCategoryDescription').val()
        };
        // 这里应该发送AJAX请求到后端
        console.log('修改分类:', categoryData);
        $.ajax({
            type: 'POST',
            url: '/updateCategory',
            data: JSON.stringify(categoryData),
            contentType: 'application/json',
            success: function(data) {
                console.log('修改分类:', data);
                if (data.code === 200) {
                    console.log('修改成功');
                    alert('修改成功');
                    window.location.reload();
                } else {
                    alert('修改失败: ' + data.message);
                }
            }
        })
        // alert('修改分类功能待实现');

        // 关闭模态框
        bootstrap.Modal.getInstance($('#editCategoryModal')[0]).hide();
    }

    // 监听确认删除复选框
    $(document).on('change', '#confirmDeleteCheck', function() {
        var isChecked = $(this).is(':checked');
        $('button.btn-danger').prop('disabled', !isChecked);
    });

    // 确认删除分类
    function confirmDeleteCategory() {
        var categoryId = categoryData.id || 0;
        var deleteOption = $('input[name="deleteOption"]:checked').val();
        console.log('删除分类id:', categoryId);
        console.log('删除选项:', deleteOption);

        $.ajax({
            type: 'POST',
            url: '/deleteCategory',
            data: JSON.stringify({
                "id": categoryId,
                "deleteArticles": deleteOption === 'withArticles'
            }),
            contentType: 'application/json',
            success: function(data) {
                console.log('删除分类:', data);
                if (data.code === 200) {
                    alert('删除成功');
                    console.log('删除成功');
                    // 跳转到分类列表页面或其他适当页面
                    window.location.href = '/categories';
                } else {
                    console.log('删除失败');
                    alert('删除失败: ' + data.message);
                }
            },
            error: function() {
                alert('删除失败，请稍后重试');
            }
        });
        // 关闭模态框
        bootstrap.Modal.getInstance($('#deleteCategoryModal')[0]).hide();
    }

</script>
</body>
</html>
